<template>
	<view class="login_section">
		<block v-if="page_model == 'section'">
			<view
				class="page_login page_render"
				:class="{
					can_show: page_render,
					wechat: page_handle_model == 'wechat_login',
				}"
			>
				<diynav
					ref="diynav"
					:navstyle="{ background: 'transparent' }"
					isFixed
					hasHeight
					:title="page_tt[page_handle_model].nav_title"
					:back="page_tt[page_handle_model].show_back"
					colorModel="day"
					:backfun="true"
					:pagename="page_tt[page_handle_model].nav_title"
					@settop="page_show"
					@topback="topback"
				></diynav>

				<!-- <view class="login_bg">
					<image class="img" src="/static/images/login_bg.png" mode="widthFix"></image>
				</view> -->

				<view class="login_main">
					<view class="wechat_login" v-if="page_handle_model == 'wechat_login'">
						<view class="wechat_step">
							<block v-if="page_step == 1">
								<view class="wechat_step_top">
									<view class="now_page">01</view>
									<view class="line">/</view>
									<view class="total_page">02</view>
								</view>
								<view class="wechat_step_center">
									<image class="imgs" src="/static/images/wechat_login.png" mode="widthFix"></image>
									<view class="tt">
										<view class="t1">手机号快捷登录</view>
										<view class="t2">同意即获取手机号</view>
									</view>
								</view>
								<view class="wechat_step_btns">
									<button @click="topback" class="btn">拒绝</button>
									<button v-if="ystk" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn">同意</button>
									<button v-else @click="login_now()" class="btn">同意</button>
								</view>
							</block>

							<block v-if="page_step == 2">
								<view class="wechat_step_avatar_box">
									<button class="wechat_step_avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
										<image class="avatar" :src="avatarUrl ? check_pic_all(avatarUrl) : '/static/images/login_no.png'" mode="aspectFill"></image>
									</button>
									<view class="avatar_tt">
										<text class="red">*</text>
										点击图标上传头像
									</view>
								</view>

								<view class="daninput_box">
									<view class="text-k jj_kr_a">
										<text class="red">*</text>
										昵称
									</view>
									<input type="nickname" class="daninput" v-model="nickname" placeholder="请输入昵称" />
								</view>

								<view class="wechat_step_btns">
									<button @click="topback()" class="btn">跳过</button>
									<button @click="update_user()" class="btn">保存</button>
								</view>
							</block>
						</view>
					</view>

					<view class="login_view" v-else>
						<view class="page_step_1">
							<view class="page_logo" v-if="page_tt[page_handle_model].show_logo">
								<image class="img" src="/static/images/logo_w.png" mode="widthFix"></image>
							</view>

							<view class="login_form">
								<view class="login_form_top">
									{{ page_tt[page_handle_model].tt }}
								</view>

								<view class="login_form_view">
									<block v-for="(v, i) in page_tt[page_handle_model].form_view" :key="i">
										<view class="form_inp" v-if="v.type == 'phone'">
											<view class="area_code">+86</view>
											<input class="inp" :type="v.inp_type" :placeholder="v.placeholder" placeholder-class="placeholder" v-model="login_form[v.key]" />
										</view>

										<view class="form_inp" v-if="v.type == 'code'">
											<input class="inp" :type="v.inp_type" :placeholder="v.placeholder" placeholder-class="placeholder" v-model="login_form[v.key]" />
											<view class="send_code" @click="send_code">
												{{ code_tips }}
											</view>
										</view>

										<view class="form_inp" v-if="v.type == 'pwd'">
											<view class="pwd_icon">
												<image class="img" src="/static/images/pwd.png"></image>
											</view>

											<input class="inp" :type="v.inp_type" :placeholder="v.placeholder" placeholder-class="placeholder" v-model="login_form[v.key]" />
										</view>

										<view class="form_inp" v-if="v.type == 'con_pwd'">
											<view class="pwd_icon">
												<image class="img" src="/static/images/pwd.png"></image>
											</view>
											<input class="inp" :type="v.inp_type" :placeholder="v.placeholder" placeholder-class="placeholder" v-model="login_form[v.key]" />
										</view>
									</block>
								</view>
							</view>

							<button @click="btn_click" class="login_btn" :loading="loading == 1">
								{{ page_tt[page_handle_model].btn_tt }}
							</button>

							<view class="btn_tips" :class="{ isbet: page_handle_model == 'pwd_login' }">
								<block v-if="page_handle_model == 'yzm_login'">
									<view class="tips_tt" @click="chang_model('pwd_login')">密码登录</view>
								</block>
								<block v-else-if="page_handle_model == 'pwd_login'">
									<view class="tips_tt" @click="chang_model('yzm_login')">验证码登录</view>
									<view class="tips_tt" @click="chang_model('forget_pwd')">忘记密码?</view>
								</block>
							</view>
						</view>
					</view>

					<view class="check_ystk" v-if="page_tt[page_handle_model].show_ystk">
						<myVerifyPopup :on="verifyshow" verifytips="请先同意以下协议"></myVerifyPopup>

						<view class="ystk_view" @click="com_change_var('ystk')">
							<view class="ucheckbox tran" :class="ystk ? 'on' : ''">
								<text class="gou mhicon icon-gou"></text>
							</view>

							<!-- <view @click="tongyif" class="checkbox" >
							<image class="icon" src="/static/images/yes.png"></image>
						</view> -->
							<text>我已阅读并同意笆林</text>
							<text class="b" @click.stop="showrule('bms_base_user_agreement')">《用户协议》</text>
							和
							<text class="b" @click.stop="showrule('bms_base_privacy_policy')">《隐私协议》</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="page_model == 'page'">
			<slot></slot>
		</block>
	</view>
</template>

<script>
import { common } from '@/util/method.js';

import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	components: {
		// sktoask
	},
	name: 'pagelogin',
	props: {
		backurl: {
			type: String,
			default: '',
		},
		// 页面是否必须用户登录
		need_login: {
			type: [Number, String],
			default: 1,
		},
		p_model: {
			type: String,
			default: 'wechat_login',
		},
	},
	data() {
		return {
			page_render: false,
			scrollTop: 0,

			//section 组件逻辑  page 插槽页面
			page_model: 'page',
			/*
			1.验证码登录 yzm_login
			2.密码登录 pwd_login
			3.设置密码 set_pwd  
			4.忘记密码 forget_pwd  
			5.修改密码 edit_pwd  
			5.小程序登录 按钮获取手机号 wechat_login
			*/
			page_handle_model: this.p_model,
			page_tt: {
				yzm_login: {
					tt: '验证码登录',
					nav_title: '',
					btn_tt: '登录',
					show_back: false,
					show_ystk: true,
					show_logo: true,
					form_view: [
						{
							type: 'phone',
							placeholder: '请输入11位手机号码',
							key: 'phone',
						},
						{
							type: 'code',
							placeholder: '请输入验证码',
							key: 'code',
						},
					],
				},
				pwd_login: {
					tt: '密码登录',
					nav_title: '',
					btn_tt: '登录',
					show_back: false,
					show_ystk: true,
					show_logo: true,
					form_view: [
						{
							type: 'phone',
							placeholder: '请输入11位手机号码',
							key: 'phone',
						},
						{
							type: 'pwd',
							placeholder: '请输入密码',
							key: 'pwd',
						},
					],
				},
				set_pwd: {
					tt: '设置密码',
					nav_title: '',
					btn_tt: '确认',
					show_back: true,
					show_ystk: false,
					show_logo: false,
				},
				forget_pwd: {
					tt: '忘记密码',
					nav_title: '',
					btn_tt: '确认',
					show_back: true,
					show_ystk: false,
					show_logo: false,
					form_view: [
						{
							type: 'phone',
							inp_type: 'number',
							placeholder: '请输入11位手机号码',
							key: 'phone',
						},
						{
							type: 'code',
							inp_type: 'number',

							placeholder: '请输入验证码',
							key: 'code',
						},
						{
							type: 'pwd',
							inp_type: 'password',

							placeholder: '请输入密码',
							key: 'pwd',
						},
						{
							type: 'con_pwd',
							inp_type: 'password',
							placeholder: '请确认密码',
							key: 'con_pwd',
						},
					],
				},
				edit_pwd: {
					tt: '修改密码',
					nav_title: '',
					btn_tt: '确认',
					show_back: true,
					show_ystk: false,
					show_logo: false,
					form_view: [
						{
							type: 'pwd',
							inp_type: 'password',

							placeholder: '请输入密码',
							key: 'pwd',
						},
						{
							type: 'con_pwd',
							inp_type: 'password',
							placeholder: '请确认密码',
							key: 'con_pwd',
						},
					],
				},

				wechat_login: {
					tt: '微信登录',
					nav_title: '登录',
					btn_tt: '登录',
					show_back: true,
					show_ystk: true,
					show_logo: true,
					form_view: [
						{
							type: 'phone',
							placeholder: '请输入11位手机号码',
							key: 'phone',
						},
						{
							type: 'code',
							placeholder: '请输入验证码',
							key: 'code',
						},
					],
				},
			},
			page_step: 1, //登录步骤  微信登录用
			page_need_login: Number(this.need_login),
			loading: 0,
			login_form: {
				phone: '',
				code: '',
				pwd: '',
			},

			code_tips: '获取验证码',
			send_req: true,
			send_code_flag: false, //发送过验证码
			iTime: 59,
			iTime_task: null,
			ystk: false,
			verifyshow: false,
			reqone: false,

			wx_code: null,
			avatarUrl: '',
			nickname: '',
			nextreq: true,
		};
	},
	beforeCreate() {},
	created() {
		this.init_pagedata('pagelogin');
	},
	destroyed() {},
	mounted() {
		this.judge_render();
	},
	methods: {
		...common,
		page_show(e, n) {
			let _this = this;
			// console.log(this, n, 'set_pagetop')
			_this.page_render = false;
			_this.change_var.page_top = e.height;
			_this.page_render = true;
			_this.module_judge_render();
		},

		judge_render() {
			// 父组件有 diynav mybtns 通过 module_judge_render 中判断组件内部的render值是否都为1 才手动执行 component_init，
			// 不建议自动执行,因为页面会错乱，因为page_model 的切换导致diynav组件还没来得及计算就给移除了 但是又不触发销毁重建生命周期
			let p_refs = {};
			if (this.objJudge(this.$parent)) {
				p_refs = this.$parent.$refs;
			}
			let filter_ref = ['diynav', 'mybtns'];
			let n = 0;
			// console.log(this)
			if (this.objJudge(p_refs)) {
				filter_ref.forEach(item => {
					if (p_refs[item]) {
						n++;
					}
				});
			}
			// console.log(this.$parent.$refs, 'this.$parent')
			// console.log(n, 'this.$parent----n')
			if (n == 0) {
				// 没有异步计算的才自动执行
				this.component_init();
			}
		},

		async component_init(target_login = false) {
			let _this = this;
			let islogin = await _this.getusertoken();
			// let islogin = false;
			if (_this.p_model == 'wechat_login') {
			} else if (_this.p_model != 'yzm_login') {
				_this.call_chang_model(_this.p_model);
			}

			if (islogin) {
				// 已登录
				await _this.get_mydevice_binding();
			}
			// console.log('component_init');
			_this.$emit('initcallback');
			let judge_login = _this.page_need_login;
			if (target_login) {
				judge_login = 1;
			}
			switch (judge_login) {
				case 1:
					// 必须要登录才展示的页面
					if (islogin) {
						_this.page_model = 'page';
						_this.$emit('loginready');
					} else {
						// 未登录
						// tabbar页面会有底部模块导致页面未占满
						// 跳转到中转页login进行登录  login页可以占满一屏高
						if (_this.isLogin_page()) {
							// login页才能登录
							_this.page_model = 'section';
							_this.req_init();
						} else {
							// 统一跳转到login页
							_this.goweburl_f('/pagesA/index/login');
						}
					}
					break;
				case 0:
					// 非必要登录
					_this.page_model = 'page';
					_this.$emit('loginready');
					break;
			}

			_this.config_init();
		},

		async get_mydevice_binding() {
			let _this = this;
			// 获取已绑定的设备
			await _this.com_getdata({
				url: '/user/dev',
				id_name: 'user_id',
				data: {},
				data_fun: function (v) {
					if (v.state == 1) {
						let binds = [];
						if (_this.objJudge(v.data)) {
							binds = v.data.reduce((pre, next) => {
								next['view_tt'] = next['bluetooth_name'] || '设备';
								// next['view_tt'] = next['dev_iccid'];
								next['view_desc'] = next['bike_battery_id'];
								next['can_click'] = true;
								next['tips'] = `保内`;
								next['tips_status'] = 1;

								// 小于15天的时候就改变提示
								let min = 15;
								let sale_day = _this.compare_time(next['after_sale_start'], next['after_sale_end'], 'day');
								let insurance_day = _this.compare_time(next['insurance_start'], next['insurance_end'], 'day');
								let min_day = Math.min(sale_day, insurance_day);

								if (min_day == sale_day) {
									if (min_day < min) {
										next['tips'] = `售后保障${min_day}天后失效`;
										next['tips_status'] = 0;
									}
								} else if (min_day == insurance_day) {
									if (min_day < min) {
										next['tips'] = `保险保障${min_day}天后失效`;
										next['tips_status'] = 0;
									}
								}

								pre.push(next);
								return pre;
							}, []);
							uni.setStorageSync('page_binding_list', binds);
						}
					} else {
						uni.setStorageSync('page_binding_list', []);
					}
				},
			});
		},
		// 主动登录
		page_login() {
			let _this = this;
			_this.component_init(true);
		},
		req_init() {
			// 隐私条款 用户协议
			return;
		},
		config_init() {
			return;
		},
		isLogin_page() {
			let routes = getCurrentPages();
			let route = routes[routes.length - 1].route; // 页面栈中的最后一个项为当前页面，route属性为页面路径
			let tabbar = ['pagesA/index/login'];
			return tabbar.indexOf(route) > -1 ? true : false;
		},

		// isTabbar() {
		// 	let routes = getCurrentPages();
		// 	let route = routes[routes.length - 1].route // 页面栈中的最后一个项为当前页面，route属性为页面路径
		// 	let tabbar = ['pages/index/index', "pages/index/control", "pages/index/setting", "pages/user/user"]
		// 	return tabbar.indexOf(route) == -1 ? false : true;
		// },

		send_code() {
			// if (!this.send_req) return
			var _this = this;
			// if (!_this.page_check(_this.ystk, 'ystk')) return
			if (!_this.check_ystk_fun()) return;
			if (!_this.page_check(_this.login_form.phone, 'phone')) return;

			if (!_this.com_loading({ status: 1, k: 'send_req', title: '发送中...', throttle: true })) return;

			let data = {
				phone: _this.login_form.phone,
				type: 'register',
			};

			if (_this.page_handle_model == 'forget_pwd') {
				data.type = 'forget';
			}

			data = _this.data_handle(data);
			_this.send_code_flag = true;
			uni.request({
				url: this.apiUrl + this.apiFilename + '/sms/send',
				header: this.headers,
				data: data,
				method: 'POST',
				success: function (res) {
					_this.com_loading({ status: 0, k: 'send_req' });
					// _this.send_req = false;
					_this.RemainTime();
					let data = res.data;
					if (data.state == 1) {
						// _this.form.codesign = info.data;
						// 验证码输入框获取焦点  填入后 调用登录   补充逻辑
						_this.com_msg('验证码已发送');
					} else {
						_this.com_msg(data.msg || '网络请求错误');
					}
				},
				fail(res) {
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
				complete(res) {
					uni.hideLoading();
				},
			});
		},

		// 已登录调用组件的修改密码等操作
		call_chang_model(model) {
			if (!model) return;
			let _this = this;
			_this.page_render = false;
			_this.$nextTick(() => {
				_this.page_model = 'section';
				_this.chang_model(model);
			});
		},

		chang_model(model) {
			let _this = this;
			this.page_handle_model = model;
			_this.reset_form(model);
		},
		topback() {
			let _this = this;
			let model = this.page_handle_model;

			// com_page_back

			switch (model) {
				case 'set_pwd':
					_this.com_page_back();
					break;
				case 'edit_pwd':
					_this.com_page_back();
					break;
				case 'forget_pwd':
					_this.page_handle_model = 'pwd_login';
					// _this.com_page_back();
					break;

				case 'wechat_login':
					_this.com_page_back();
					break;
			}
		},
		btn_click() {
			let _this = this;
			let mode = _this.page_handle_model;
			_this.loading = 1;
			switch (mode) {
				case 'set_pwd':
					_this.set_pwd();
				case 'edit_pwd':
					_this.edit_pwd();
					break;
				case 'forget_pwd':
					// _this.page_handle_model = 'pwd_login'
					_this.forget_pwd();
					break;
				default:
					_this.login_now();
					break;
			}
		},

		set_pwd() {
			this.reset_status();
		},
		edit_pwd() {
			this.reset_status();
		},
		forget_pwd() {
			let _this = this;
			if (!_this.page_check(_this.login_form.phone, 'phone')) return;
			if (!_this.page_check(_this.login_form.code, 'code')) return;
			if (!_this.page_check(_this.login_form.pwd, 'pwd')) return;
			if (!_this.page_check(_this.login_form.con_pwd, 'con_pwd')) return;
			if (_this.login_form.pwd != _this.login_form.con_pwd) {
				return _this.com_msg(_this.COMMON_VAR.page_check_config.contrast_pwd.tips_fail);
			}
			if (!_this.com_loading({ status: 1, title: '修改中...' })) return;

			let data = {
				phone: _this.login_form.phone,
				code: _this.login_form.code,
				pwd: _this.login_form.pwd,
			};
			data = _this.data_handle(data);
			uni.request({
				header: this.headers,
				url: this.apiUrl + this.apiFilename + '/forget/change',
				method: 'POST',
				data,
				success: res => {
					_this.com_loading({ status: 2, title: '修改成功' });

					let data = res.data;
					console.log(JSON.stringify(res), 'forget_pwd');
					if (data.state == 1) {
						setTimeout(() => {
							_this.chang_model('pwd_login');
						}, 1000);
					}

					_this.reset_status();
				},
				fail: res => {
					uni.hideLoading();
					// _this.com_msg('网络请求错误');
				},
			});
		},

		reset_form(model) {
			let _this = this;
			switch (model) {
				case 'yzm_login':
					_this.login_form.pwd = '';
					_this.login_form.code = '';
					break;
				case 'pwd_login':
					_this.login_form.code = '';
					_this.login_form.pwd = '';
					break;
			}
		},

		getPhoneNumber(e) {
			let _this = this;
			wx.login({
				success(res) {
					_this.wx_code = res.code;
				},
			});
			// console.log(res.code, 'getPhoneNumber');
			// console.log(e.detail.code)  // 动态令牌
			// console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			// console.log(e.detail.errno)  // 错误码（失败时返回）
			if (!_this.check_ystk_fun()) return;
			if (e.detail.code) {
				//新版
				// this.w_login1();
				// _this.page_step = 2;
				_this.com_getdata({
					url: '/login/phone',
					data: {
						jscode: e.detail.code,
					},
					data_handle_on: false,
					method: 'GET',
					data_fun: function (res) {
						if (res.state == 1) {
							// _this.page_step = 2;
							_this.login_form.phone = res.data;
							_this.login_now();
						} else {
							// _this.com_msg(res.msg)
						}
					},
				});
			} else {
				_this.com_msg(e.detail.errMsg);
				console.error(e.detail.errno, e.detail.errMsg);
			}
		},
		async onChooseAvatar(e) {
			let _this = this;
			let path = e.detail.avatarUrl;
			_this.avatarUrl = path;
			// console.log(e, 'onChooseAvatar')
			let { data = false } = await _this.com_upload({
				type: 'head',
				path,
			});
			if (data) {
				_this.avatarUrl = data;
			}
		},
		check_ystk_fun() {
			let _this = this;
			if (!_this.ystk) {
				if (_this.verifyshow) return false;
				_this.verifyshow = true;
				setTimeout(() => {
					_this.verifyshow = false;
				}, 3000);
				return false;
			} else {
				return true;
			}
		},
		async login_now() {
			let _this = this;
			if (!_this.check_ystk_fun()) return;
			if (!_this.page_check(_this.login_form.phone, 'phone')) return;
			if (!_this.com_loading({ status: 1, k: 'nextreq', title: '登录中...', throttle: true })) return;
			let model = _this.page_handle_model;
			let data = {};
			let data_handle_on = true;
			let login_api = '/login/phone';
			let method = 'POST';
			switch (model) {
				case 'yzm_login':
					if (!_this.page_check(_this.send_code_flag, 'send_code_flag')) return;
					if (!_this.page_check(_this.login_form.code, 'code')) return;

					data = {
						phone: _this.login_form.phone,
						code: _this.login_form.code,
					};
					break;
				case 'pwd_login':
					if (!_this.page_check(_this.login_form.pwd, 'pwd')) return;
					data = {
						phone: _this.login_form.phone,
						pwd: _this.login_form.pwd,
					};

					login_api = '/login/login';
					break;

				case 'wechat_login':
					data = {
						jscode: _this.wx_code,
						phone: _this.login_form.phone,
					};
					data_handle_on = false;
					method = 'GET';
					login_api = '/login/login';
					break;
			}
			let response = await _this.com_getdata({
				url: login_api,
				method,
				data,
				data_handle_on,
			});
			_this.com_loading_fun({
				mode: 2,
				k: 'nextreq',
				title: '登陆成功',
				hide_time: 300,
				response,
				suc_icon: 'success',
				fail_icon: 'none',
				show_fail_msg: true,
				suc_callback: data => {
					return async () => {
						_this.set_user(data, 'login');
						if (model == 'wechat_login') {
							// 微信登陆模式，如果没头像 page_step 则改为2 有头像直接登陆
							let { nickname, user_head } = data.model;
							_this.nickname = nickname;
							_this.avatarUrl = user_head;
							// if (true) {
							if (!user_head) {
								_this.page_step = 2;
								return;
							} else {
								_this.page_model = 'page';
								_this.$emit('loginready');
							}
						} else {
							_this.reset_status();
							_this.page_model = 'page';
							_this.$emit('loginready');
						}
					};
				},
				fail_callback: data => {
					_this.login_form.code = '';
				},
			});
		},

		// 更新用户信息
		async update_user() {
			let _this = this;
			let user_id = uni.getStorageSync('userid');
			let avatarUrl = _this.avatarUrl;
			let nickname = _this.nickname;
			if (!_this.page_check(avatarUrl, 'head')) return;
			if (!_this.page_check(nickname, 'nickname')) return;
			if (!_this.com_loading({ status: 1, k: 'nextreq', title: '保存中...', throttle: true })) return;
			let response = await _this.com_getdata({
				url: '/user/edit',
				data: { user_id, avatarUrl, nickname },
			});
			_this.com_loading_fun({
				mode: 2,
				k: 'nextreq',
				title: '保存成功',
				hide_time: 300,
				response,
				suc_icon: 'success',
				fail_icon: 'none',
				show_fail_msg: true,
				suc_callback: data => {
					return async () => {
						_this.page_model = 'page';
						_this.$emit('loginready');
					};
				},
			});
		},
		// 清除倒计时任务
		reset_status() {
			this.loading = 0;
			this.RemainTime(true);
		},

		showrule(type) {
			let _this = this;
			_this.goweburl_f(`/pagesC/index/com_article?id=${type}`);
		},
	},
	watch: {},
};
</script>

<style lang="scss">
.login_section {
	position: relative;
	min-height: 100vh;
	// background: #fff;
	overflow: hidden;
}

.page_login {
	// padding: 0 75rpx;
	background-color: #383950;
	min-height: 100vh;

	&.wechat {
		background-color: #ffffff;
	}

	// width: 100%;
	// padding-top: 120rpx;
	.login_bg {
		.img {
			z-index: 2;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
	}

	.login_main {
		margin: 40rpx 75rpx 0;

		position: relative;
		z-index: 5;
		// padding-top: 40rpx;
	}

	.page_logo {
		// padding-top: 80rpx;
		margin: 30rpx auto 188rpx;
		width: 272rpx;
	}

	.login_form {
		.login_form_top {
			font-size: 42rpx;
			color: #fff;
			font-weight: 700;
			margin-bottom: 30rpx;
		}

		.login_form_view {
			margin-bottom: 66rpx;

			.form_inp {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding: 0 20rpx;
				color: #fff;
				height: 108rpx;
				background: transparent;
				border-radius: 30rpx;
				border: 1rpx solid #eaedf2;

				& + .form_inp {
					margin-top: 52rpx;
				}

				.pwd_icon {
					width: 40rpx;
					flex-shrink: 0;

					.img {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.inp {
					width: 100%;
					padding: 0 20rpx;
					height: 100%;
				}

				.send_code {
					flex-shrink: 0;
					color: #1fd1c2;
				}
			}
		}
	}

	.login_btn {
		background-color: #1fd1c2;
		color: #fff;
		height: 100rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin-bottom: 40rpx;
	}

	.btn_tips {
		display: flex;
		align-items: center;
		justify-content: center;

		&.isbet {
			justify-content: space-between;
		}

		.tips_tt {
			font-size: 28rpx;
			color: #fff;
		}
	}

	.check_ystk {
		position: fixed;
		left: 0;
		bottom: 70rpx;
		padding: 0 75rpx;
		width: 100%;

		.ystk_view {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			// color: #fff;

			.ucheckbox {
				margin-right: 8rpx;
			}

			.b {
				color: #1fd1c2;
			}
		}
	}

	.page_main {
		height: 860rpx;

		.btns {
			padding-top: 70rpx;

			&.btns2 {
				padding-top: 140rpx;

				.btn {
					margin: 0;

					&:last-child {
						margin-left: 24rpx;
					}
				}
			}

			.btn {
				width: 276rpx;
				height: 100rpx;
				background: #eeeeee;
				border-radius: 14rpx;
				padding: 0;
				margin: 20rpx auto;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}

	.wechat_login {
		padding-top: 80rpx;
	}

	.red {
		color: #ff5656;
	}

	.wechat_step_top {
		color: #999999;
		font-size: 24rpx;

		display: flex;
		align-items: flex-end;
		justify-content: center;

		line-height: 1;

		.now_page {
			color: #000000;
			font-size: 46rpx;
			font-weight: 700;
			line-height: 0.9;
		}

		.line {
			margin: 0 10rpx;
		}
	}

	.wechat_step_center {
		width: 312rpx;
		height: 312rpx;
		margin: 120rpx auto 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.imgs {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			display: block;
		}

		.tt {
			font-size: 40rpx;
			color: #282828;
			text-align: center;
			margin-top: -30rpx;
			position: relative;
			z-index: 2;

			.t1 {
				font-weight: 700;
			}

			.t2 {
				color: #727272;
				font-size: 24rpx;
				margin-top: 4rpx;
			}
		}
	}

	.wechat_step_avatar_box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.wechat_step_avatar {
			width: 312rpx;
			margin: 120rpx auto 0;
			position: relative;
			border-radius: 50%;

			.avatar {
				width: 312rpx;
				height: 312rpx;
				border-radius: 50%;
			}
		}

		.avatar_tt {
			line-height: 80rpx;
			text-align: center;
			color: #000;
			width: 100%;
			font-size: 28rpx;
		}
	}

	.daninput_box {
		height: 100rpx;
		border-radius: 6rpx;
		background: #f5f5f5;
		// padding-left: 150rpx;
		position: relative;
		width: 100%;
		margin: 40rpx 10rpx 0;

		display: flex;
		align-items: center;
		// justify-content: center;

		.text-k {
			height: 40rpx;
			// left: 0rpx;
			text-align: center;
			// position: absolute;
			// top: 50%;
			// transform: translateY(-50%);
			// width: 120rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
		}

		.daninput {
			flex: 1;
			height: 100%;
			padding: 0 20rpx;
		}
	}

	.wechat_step_btns {
		margin-top: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		// &.btns2 {
		// 	padding-top: 140rpx;

		// 	.btn {
		// 		margin: 0;

		// 		&:last-child {
		// 			margin-left: 24rpx;
		// 		}
		// 	}
		// }

		.btn {
			// width: 276rpx;
			flex: 1;
			height: 100rpx;
			background: #eeeeee;
			color: #000000;
			border-radius: 14rpx;
			padding: 0;
			margin: 10rpx;
			font-weight: bold;
			font-size: 32rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			&:nth-child(2) {
				background: var(--color1);
				color: #ffffff;
			}
		}
	}

	.page_1 {
		width: 100%;

		.text1 {
			font-size: 46rpx;
		}
	}

	.page_2 {
		.edit-userinfo {
			padding: 24rpx 0;
			width: 100%;

			.daninput {
				height: 100rpx;
			}

			.upbtn {
				width: 300rpx;

				margin: 0 auto 30rpx;
				padding: 0;
				position: relative;
				border: none;
				background: none;

				&:after {
					display: none;
				}

				.textb {
					line-height: 80rpx;
					text-align: center;

					color: #000;
					width: 100%;

					font-size: 28rpx;
				}

				image {
					width: 300rpx;
					height: 300rpx;
					border-radius: 100%;
				}
			}
		}
	}
}
</style>
